<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<script src="../data/unpkg.com_vue@2.7.14_dist_vue.js"></script>
<script src="../data/unpkg.com_element-ui@2.15.13_lib_index.js"></script>
<script src="../data/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../data/unpkg.com_element-ui@2.15.13_lib_theme-chalk_index.css">
<body>
<div id="app" style="width: 1000px; margin: 0 auto">
    <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="关注" name="first">关注</el-tab-pane>
            <el-tab-pane label="推荐" name="second">
                <div style="width: 1020px;">
                    <ul v-infinite-scroll="load" class="infinite-list"
                        style="overflow:auto;height:calc(102vh - 35px);margin: 0;">
                        <li v-for="article in message" class="infinite-list-item" style="list-style: none">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div style="width: 100%;height: 100px">
                                        <h3>
                                            <a>{{ article.articleTitle }}</a>
                                        </h3>
                                        <p>
                                            <span>{{ article.pageView }}点赞</span>
                                            <span>{{ article.comments }}评论</span>
                                            <span>{{ article.articleTime }}</span>
                                        </p>
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane label="永州" name="third">广州</el-tab-pane>
            <el-tab-pane label="视频" name="fourth">视频</el-tab-pane>
            <el-tab-pane label="财经" name="fifth">
                <div style="width: 1020px;">
                    <ul v-infinite-scroll="channel" class="infinite-list"
                        style="overflow:auto;height:calc(102vh - 35px);margin: 0;">
                        <li v-for="article in message" class="infinite-list-item" style="list-style: none">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div style="width: 100%;height: 100px">
                                        <h3>
                                            <a>{{ article.articleTitle }}</a>
                                        </h3>
                                        <p>
                                            <span>{{ article.pageView }}点赞</span>
                                            <span>{{ article.comments }}评论</span>
                                            <span>{{ article.articleTime }}</span>
                                        </p>
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane label="科技" name="sixth">科技</el-tab-pane>
            <el-tab-pane label="热点" name="seventh">热点</el-tab-pane>
            <el-tab-pane label="国际" name="eighth">国际</el-tab-pane>
            <el-tab-pane label="更多" name="ninth">更多</el-tab-pane>
        </el-tabs>
    </template>
</div>
</body>
<link rel="stylesheet" href="../css/bloggerHomePage.css">
<script rel="script" src="../js/bloggerHomePage.js"></script>
<script>
    let Main = {
        data() {
            return {
                userId: '2',
                activeName: 'second',
                count: 5,
                title: '',
                pageView: '',
                comment: '',
                releaseTime: '',
                articleTitle: '',
                articleTime: '',
                message: [],
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
                this.count = 5;
            },
            load() {
                this.count += 10;
                axios({
                    method: 'get',
                    url: '/articlesThatUsersWillLike?userId=' + this.userId + '&size=' + this.count,
                }).then(res => {
                    /*给数组赋值*/
                    this.message = res.data.data;
                    for (let i = 0; i < this.message.length; i++) {
                        console.log("标题" + i + " ：" + this.message[i].articleTitle + " , 阅读" + i + " ：" + this.message[i].pageView + " , 评论" + i + " ："
                            + this.message[i].comments + " , 时间" + i + " ：" + timeFormatConversion(this.message[i].articleTime))
                    }
                })
            },
            channel(){
                this.count += 10;
                axios({
                    method: 'get',
                    url: '/articlesThatUsersWillLike?userId=' + this.userId + '&size=' + this.count,
                }).then(res => {
                    /*给数组赋值*/
                    this.message = res.data.data;
                    for (let i = 0; i < this.message.length; i++) {
                        console.log("标题" + i + " ：" + this.message[i].articleTitle + " , 阅读" + i + " ：" + this.message[i].pageView + " , 评论" + i + " ："
                            + this.message[i].comments + " , 时间" + i + " ：" + timeFormatConversion(this.message[i].articleTime))
                    }
                })
            }
        }
    };
    let Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>